<template>
  <div class="card">
    <div class="flex p-3">
      <h4 class="content-title">{{ activeName }}</h4>
      <class-table :class-type="tabActive"></class-table>
    </div>
  </div>
</template>

<script>
import ClassTable from '@/gov/views/bus/import/class/components/Table'
import { mapGetters } from 'vuex'
export default {
  components: {
    ClassTable,
  },
  props: {},
  data() {
    return {
      tabActive: '',
    }
  },
  computed: {
    ...mapGetters(['user', 'provinceMainBusiness', 'provinceMainBusinessEnum']),
    tabs() {
      return this.provinceMainBusiness
        .filter(item => this.user.scopeArr.includes(item.code))
        .map(item => {
          return { code: item.code, title: item.value }
        })
    },
    scopes() {
      const scopes = []
      this.user.scopeArr.forEach(item => {
        if (this.provinceMainBusinessEnum[item]) {
          scopes.push(item)
        }
      })
      return scopes
    },
    routeClass() {
      return this.$route.query.i || this.scopes?.[0] || ''
    },
    activeName() {
      return this.provinceMainBusinessEnum[this.tabActive] || ''
    },
  },
  watch: {
    routeClass: {
      handler: function (val) {
        this.tabActive = val
      },
      immediate: true,
    },
  },
  created() {
    this.$store.dispatch('getProvinceMainBusiness')
  },
  mounted() {},
  methods: {
    goDetail(tab) {
      this.tabActive = tab.code
      this.$router.push({
        name: 'import_class',
        query: {
          i: tab.code,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.class-wrap {
  display: flex;
  flex-direction: row;
}
.class-tabs {
  width: 20%;
  min-width: 120px;
  overflow: hidden;
  padding: 1rem;
  border-right: 1px solid $border-color;
}
.tab-title {
  padding-bottom: 1rem;
  border-bottom: 1px solid $gray-200;
  font-size: 1.2rem;
  color: $gray-600;
}
.tab-title-icon {
  font-size: 1.1rem;
  margin-right: 0.5rem;
}
.class-tabs-item {
  display: block;
  padding: 0.5rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: $body-color;
  font-size: 1.1rem;
  cursor: pointer;

  &.tab-active,
  &:hover {
    color: $primary;
    color: var(--primary);
  }
}
.content-title {
  margin-bottom: 1rem;
  font-size: 1.15rem;
  font-weight: bold;
}
</style>
